<template>
    <div id="pingjia">
        <h3>你一共收到{{myData.length}}条评价</h3>
        <div class="yitiaopingjia" v-for="(item,index) in myData" :key="index">
            <div>
                <p>订单号：{{item.order_number}}</p>
                <el-rate v-model="item.star_number" disabled show-score text-color="#ff9900">
                </el-rate>
            </div>
            <p>{{item.user_name.slice(0,1)}} XX  评价你：</p>
            <p>{{item.evaluate}}</p>
            <p class="mytime">{{item.evaluate_time}}</p>
        </div>
    </div>
</template>

<script>
    import * as api from "../../utils/api";

    export default {
        name: 'userPinjia',
        data(){
            return{
                myData: [],
                loginUser:''
            }
        },
        created() {
            // console.log(12121)
            this.loginUser = this.$store.state.msgCount.user
            // console.log(this.$store.state.msgCount.user)
            this.chaxun()
        },
        methods:{
            chaxun(){
                this.axios({
                    url: api.GET_FINDDRIVEREVAL,
                    method: 'get',
                    params:{
                        userId:this.loginUser.user_id
                    }
                }).then(data=>{
                    // console.log(data)
                    this.myData = data.data.data
                })
            },
        },
    }
</script>

<style lang="less" scoped>
    #pingjia{
        /*background-color: white;*/
        width: 70%;
        margin: 2rem auto 0 auto;
        height: 50rem;
        /*border: 1px solid red;*/
        h3{
            text-align: left;
        }
    }
    .yitiaopingjia{
        box-sizing: border-box;
        padding:1rem 0 2rem 3rem;
        width: 100%;
        margin: 2rem auto;
        /*height: 10rem;*/
        border-radius: 2rem;
        background-color: #53617B;
        position: relative;
        top: 0;
        transition: all .18s linear;
    }
    .yitiaopingjia:hover{
        transform:scaleX(1.05) scaleY(1.04);
        box-shadow:  0 2px 16px #bdbdbd, 0 0 5px #bdbdbd, 0 0 5px #bdbdbd;
    }
    .yitiaopingjia>div{
        width: 100%;
        height: 2rem;
    }
    .yitiaopingjia>div>p{
        font-size: 1.2rem;
    }
    .yitiaopingjia p{
        color: white;
        text-align: left;
    }
    .yitiaopingjia>div>p{
        width: 40%;
        float: left;
    }
    .yitiaopingjia>p:nth-of-type(1){
        margin: 0.5rem 0;
    }
    .yitiaopingjia>p:nth-of-type(2){
        padding-right: 4rem;
        text-indent: 3rem;
        color: #b9b9b9;
    }
    .el-rate{
        width: 20rem;
        float: right;
    }
    .mytime{
        margin: 1rem 0 0 0;
        padding-right: 5rem;
        text-align: right!important;
    }
</style>